<template>
	<section class="login-container">
		<!-- 标题模块开始 -->
		<div class="login-title">
			<el-image style="width: 45px; height: 45px; margin-right: 10px" :preview-src-list="showList" :src="bannerUrl"></el-image>
			<span>自由编程协会</span>
			<!-- <div class="logo"></div> -->
		</div>
		<!-- 标题模块结束 -->
		<!-- 描述模块开始 -->
		<div class="login-desc">
			<span>欢迎访问自由编程协会</span>
		</div>
		<!-- 描述模块结束 -->
		<!-- 登录方式切换模块开始 -->
		<div class="login-tabs" v-if="!isRegister">
			<el-tabs v-model="activeName" stretch @tab-click="handleClick">
				<el-tab-pane label="账号密码登录" name="first">
					<el-form ref="UserNameAndPasswordLoginForm" :rules="rules" :model="loginForm">
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item prop="email">
									<el-input v-model="loginForm.studentNumber" placeholder="账号">
										<template #prefix>
											<el-icon class="el-input__icon"><User /></el-icon>
										</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-form-item prop="password">
									<el-input v-model="loginForm.password" type="password" style="margin-top: 17px" placeholder="密码">
										<template #prefix>
											<el-icon class="el-input__icon"><Lock /></el-icon>
										</template>
									</el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
				<el-tab-pane label="邮箱登录" name="second">
					<el-form>
						<el-row :gutter="20">
							<el-col :span="24">
								<el-input v-model="emailForm.account" placeholder="邮箱">
									<template #prefix>
										<el-icon class="el-input__icon"><Message /></el-icon>
									</template>
								</el-input>
							</el-col>
						</el-row>
						<el-row :gutter="5" style="margin-top: 17px">
							<el-col :span="12">
								<el-input v-model="emailForm.verical" placeholder="验证码">
									<template #prefix>
										<el-icon class="el-input__icon"><HotWater /></el-icon>
									</template>
								</el-input>
							</el-col>
							<el-col :span="12">
								<el-button style="width: 100%" @click="sendMessage" :loading="isLoading">{{ Verification }}</el-button>
							</el-col>
						</el-row>
					</el-form>
				</el-tab-pane>
			</el-tabs>
			<div class="login-types">
				<el-row :gutter="10">
					<el-col :span="24">
						<section class="login-rememberME">
							<div class="rememberMe-content">
								<input name="rememberMe" style="display: inline-block" type="checkbox" v-model="loginForm.rememberMe" />
								<div style="margin-left: 5px">7天自动登录</div>
							</div>
							<div class="register-content">
								<a>忘记密码</a>
							</div>
						</section>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-button size="large" style="width: 100%; margin-top: 20px" @click="login" type="primary">登录</el-button>
					</el-col>
				</el-row>
			</div>
		</div>
		<!-- 登录方式切换模块结束 -->
		<div class="register-tabs" v-else>
			<!-- 标题模块开始 -->
			<span>注册</span>
			<!-- 标题模块结束 -->
			<el-form>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item>
							<el-input type="text" style="margin-top: 17px" placeholder="请输入真实姓名" v-model="registerForm.realName"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item>
							<el-input type="email" style="margin-top: 17px" placeholder="邮箱" v-model="registerForm.email"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="5" style="margin-top: 17px">
					<el-col :span="12">
						<el-input v-model="emailForm.verical" placeholder="验证码">
							<template #prefix>
								<el-icon class="el-input__icon"><HotWater /></el-icon>
							</template>
						</el-input>
					</el-col>
					<el-col :span="12">
						<el-button style="width: 100%" @click="sendMessage" :loading="isLoading">{{ Verification }}</el-button>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item>
							<el-input type="password" style="margin-top: 17px" placeholder="8-16位密码,区分大小写" v-model="registerForm.password"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
				<el-row :gutter="20">
					<el-col :span="24">
						<el-form-item>
							<el-input type="password" style="margin-top: 17px" placeholder="确认密码" v-model="registerForm.confirmPassword"></el-input>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<div class="register-btn">
				<el-button type="primary" style="width: 30%" size="small" @click="handleRegister">注册</el-button>
				<a @click="isRegister = false">使用已有账号登录</a>
			</div>
		</div>
		<!-- 第三方登录模块开始 -->
		<div class="other-login" v-if="!isRegister">
			<div class="other-left">
				<span>其他登录方式</span>
				<!-- 图标组开始 -->
				<div class="left-icons">
					<img src="alipay.png" alt="支付宝" />
					<img src="wechat.png" alt="微信" />
					<img src="QQ.png" alt="QQ" />
				</div>
				<!-- 图标组结束 -->
			</div>
			<div class="other-right">
				<a @click="changeState">注册账户</a>
			</div>
		</div>
		<!-- 第三方登录模块结束 -->
	</section>
</template>
<script lang="ts">
import { defineComponent, reactive, toRefs, ref } from 'vue';
import { User, Lock, Message, HotWater } from '@element-plus/icons-vue';
import { loginByStudentNumber,selectUserInfoByNumber } from '../../../api/login/index';
import { ElForm, ElMessage } from 'element-plus';
import { Session } from '../../../utils/storage';
import router from '../../../router/index';
export default defineComponent({
	name: 'login-form',
	components: {
		// eslint-disable-next-line vue/no-unused-components
		User,
		// eslint-disable-next-line vue/no-unused-components
		Lock,
		// eslint-disable-next-line vue/no-unused-components
		Message,
		// eslint-disable-next-line vue/no-unused-components
		HotWater,
	},
	setup() {
		const validateEmail = (rule: any, value: any, callback: any) => {
			if (value === '') {
				callback(new Error('请输入学号'));
			} else {
				if (!new RegExp('^[0-9a-z]+$').test(value)) {
					callback(new Error('学号格式不正确'));
				} else {
					callback();
				}
			}
		};
		const validatePassword = (rule: any, value: any, callback: any) => {
			if (value === '') {
				callback(new Error('请输入密码'));
			} else {
				if (!new RegExp('^[0-9A-Za-z]{8,20}$').test(value)) {
					callback(new Error('密码格式不正确'));
				} else {
					callback();
				}
			}
		};
		const UserNameAndPasswordLoginForm = ref<InstanceType<typeof ElForm>>();
		const state = reactive({
			showList: ['/logo.png'],
			bannerUrl: '/logo.png',
			activeName: 'first',
			loginForm: {
				studentNumber: '',
				password: '',
			},
			registerForm: {
				email: '',
				password: '',
			},
			isRegister: false,
			totalTime: 60,
			Verification: '发送验证码',
			emailForm: {
				account: '',
			},
			isLoading: false,
			rules: {
				email: [{ validator: validateEmail, trigger: 'blur' }],
				password: [{ validator: validatePassword, trigger: 'blur' }],
			},
		});

		const login = async () => {
			if (state.loginForm.studentNumber == null || state.loginForm.password == null) {
				ElMessage.warning('请输入账户和密码');
				return;
			}
			loginByStudentNumber(state.loginForm).then(res=>{
				if (res.code === 'ILLEGAL_ARGUMENT') {
					ElMessage.error(res.data.join('\n'));
				} else if (res.code === 'UserErrorEnums-2') {
					ElMessage.error(res.message);
				}else{
					debugger;
					Session.set('token',res.data.token)
				}
				selectUserInfoByNumber(state.loginForm.studentNumber).then(res=>{
					Session.set('userInfo',res.data.userInfo);
				}).finally(()=>{
					router.push('/home');
				})
			})
		};
		const sendMessage = async () => {
			// if(state.registerForm.email===''){
			// 	ElMessage.warning("请输入邮箱")
			// 	return;
			// }
			// if(state.emailForm.account===''){
			// 	ElMessage.warning("请输入邮箱")
			// 	return;
			// }
			state.isLoading = true;
			state.Verification = state.totalTime + 's后重新发送';
			console.log({ address: state.emailForm.account || state.registerForm.email });
			const res = await getEmailIdentityCode({ address: state.emailForm.account });
			console.log(res);
			let clock = window.setInterval(() => {
				state.totalTime--;
				state.Verification = state.totalTime + 's后重新发送';
				if (state.totalTime < 0) {
					window.clearInterval(clock);
					state.isLoading = false;
					state.Verification = '重新发送验证码';
					state.totalTime = 60;
				}
			}, 1000);
		};
		const changeState = () => {
			state.isRegister = !state.isRegister;
		};
		const handleRegister = async () => {
			const res = await register(state.registerForm);

			console.log(res);
		};
		return {
			...toRefs(state),
			login,
			UserNameAndPasswordLoginForm,
			sendMessage,
			changeState,
			handleRegister,
		};
	},
});
</script>
<style lang="scss" scoped>
.logo {
	display: block;
	width: 16rem;
	height: 2rem;
	cursor: pointer;
	background-position: center;
	background-repeat: no-repeat;
	background-size: contain;
	background-image: url(https://lf-cdn-tos.bytescm.com/obj/static/xitu_extension/static/brand.82c24770.svg);
}
.login-container {
	width: 340px;
	height: auto;
	box-sizing: border-box;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	.login-title {
		width: 100%;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		span {
			font-size: 32px;
		}
	}
	.login-desc {
		margin-top: 10px;
		line-height: 20px;
		font-family: SourceHanSansSC-regular;
		font-size: 14px;
		color: #87898b;
	}
	.login-tabs {
		width: 100%;
	}
	.login-types {
		margin-top: 20px;
		width: 100%;
		height: auto;
		.login-rememberME {
			width: 100%;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			box-sizing: border-box;
			align-items: center;
			color: #5d5d5d;
			font-size: 14px;
			.rememberMe-content {
				display: flex;
				flex-direction: row;
				align-items: center;
			}
			.register-content a {
				text-decoration: none;
				color: #2593fc;
			}
		}
	}
	.register-tabs {
		width: 100%;
		display: flex;
		flex-direction: column;
		align-content: center;
		margin-top: 20px;
		span {
			color: #232424;
			font-size: 18px;
			line-height: 27px;
		}
		.register-btn {
			margin-top: 17px;
			display: flex;
			flex-direction: row;
			justify-content: space-between;
			align-items: center;
			a {
				text-decoration: none;
				color: #2593fc;
			}
		}
	}
	.other-login {
		width: 100%;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		font-size: 14px;
		margin-top: 15px;
		.other-left {
			display: flex;
			flex-direction: row;
			align-items: center;
			span {
				color: #565759;
			}
			.left-icons {
				display: flex;
				flex-direction: row;

				align-items: center;
				img {
					width: 18px;
					height: 18px;
					margin-left: 5px;
				}
			}
		}
		.other-right a {
			text-decoration: none;
			color: #2593fc;
		}
	}
}
</style>
